<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Button
        v-hasC="{ name: 'setting-clinic-add', flag: 'v1/setting/clinic/add' }"
        type="primary"
        @click="openedit(-1)"
        >新增</Button
      >
      <Table highlight-row :columns="columns" :data="data" class="ivu-mt-16" @on-cell-click="cellclicktable">
        <template slot-scope="{ row }" slot="status">
          <Badge v-if="row.status === '1'" color="green" text="启用" />
          <Badge v-if="row.status === '0'" color="red" text="停用" />
        </template>
        <template slot-scope="{ row }" slot="sort">
          <span v-if="sortshow === row.id">
            <InputNumber v-width="'100%'" :formatter="$inputday" v-model="formItem.sort" @on-blur="cellblur"></InputNumber>
          </span>
          <span v-else>{{row.sort}}</span>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <a
            v-hasC="{ name: 'setting-clinic-edit', flag: 'v1/setting/clinic/edit' }"
            @click="openedit(row)"
            >编辑</a
          >
        </template>
      </Table>
    </Card>
    <Modal
      v-model="showedit"
      :title="edits ? `新增` : `编辑`"
      @on-cancel="canceledit(modalname)"
    >
      <Form
        :model="formItem"
        :label-width="80"
        :ref="modalname"
        :rules="createRules"
      >
        <FormItem label="名称" prop="clinic_name">
          <Input v-model="formItem.clinic_name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <InputNumber v-model="formItem.sort"></InputNumber>
        </FormItem>
        <FormItem label="状态">
          <i-switch v-model="formItem.status">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="canceledit(modalname)">取消</Button>
        <Button type="primary" @click="submitedit(modalname)">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  settingclinicview,
  settingclinicadd,
  settingclinicedit,
} from "@/api/hqapi/indexone.js";
import mixins from "@/mixins/mixins";
export default {
  name: "diagnosis",
  mixins: [mixins],
  data() {
    return {
      modalname: "formTtem",
      formItem: {
        id: undefined,
        clinic_name: "",
        sort: null,
        status: true,
      },
      createRules: {
        clinic_name: [
          { required: true, message: "请输入诊室名称", trigger: "blur" },
        ],
        sort: [
          {
            required: false,
            message: "请输入正整数",
            pattern: /^[+]{0,1}(\d+)$/,
            trigger: "blur",
          },
        ],
      },
      columns: [
        { title: "名称", key: "clinic_name" },
        { title: "状态", slot: "status" },
        { title: "排序", key: "sort", slot: 'sort' },
        { title: "操作", slot: "operation" },
      ],
      sortshow: undefined,
      data: [],
    };
  },
  methods: {
    cellclicktable(row,v) {
      this.logs(v.key)
      if (v.key === 'sort'){
        this.sortshow = row.id
        this.formItem = {
          id: row.id || undefined,
          clinic_name: row.clinic_name,
          sort: parseInt(row.sort),
          status: +row.status === 1,
        };
      } else {
        this.sortshow = undefined
      }
    },
    cellblur() {
      let config = {
        id: this.formItem.id,
        clinic_name: this.formItem.clinic_name,
        sort: this.formItem.sort,
        status: this.formItem.status ? 1 : 0,
      };
      settingclinicedit(config).then(() => {
        this.sortshow = undefined
        this.formItem = {
          id: undefined,
          clinic_name: "",
          sort: null,
          status: true,
        };
        this.askData();
      });
    },
    initial() {
      this.funaskData = settingclinicview;
      this.funupdate = settingclinicedit;
      this.funcreate = settingclinicadd;
      this.askData();
    },
    askDatas(res) {
      this.data = res;
    }, // 请求数据处理
    paramscancel() {
      this.formItem = {
        id: undefined,
        clinic_name: "",
        sort: null,
        status: true,
      };
    }, // 新增编辑取消数据处理
    paramsedit(row) {
      this.formItem = {
        id: row.id || undefined,
        clinic_name: row.clinic_name,
        sort: parseInt(row.sort),
        status: +row.status === 1,
      };
    }, // 新增编辑显示数据处理
    paramssubmit() {
      let config = {
        id: this.formItem.id,
        clinic_name: this.formItem.clinic_name,
        sort: this.formItem.sort,
        status: this.formItem.status ? 1 : 0,
      };
      return config;
    }, // 新增编辑提交数据处理
  },
};
</script>

<style scoped></style>
